<template>
  <div class="contract-form">
    <!-- 基本信息 -->
    <h3>基本信息</h3>
    <el-form :model="form" label-width="80px" class="basic-info">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="所属小区">
            <el-input v-model="form.communityName" disabled style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车位号">
            <el-input v-model="form.parkingSpaceCode" disabled style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="收费金额">
            <el-input v-model="form.contractRent" disabled style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="租赁方">
            <el-input v-model="form.leaseCompany" disabled style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系人">
            <el-input v-model="form.leaseName" disabled style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系电话">
            <el-input v-model="form.leasePhone" disabled style="width: 100%;" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="车辆号码">
            <el-input v-model="form.vehicleLicense" disabled style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车辆排量">
            <el-input v-model="form.vehicleDisplacement" disabled style="width: 100%;" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- 合同信息 -->
    <h3>合同信息</h3>
    <el-form :model="form" label-width="80px" class="contract-info">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="合同编号">
            <el-input v-model="form.contractNumber" disabled style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="租户">
            <el-input v-model="form.tenantName" disabled style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="签订日期">
            <el-input v-model="formattedSigningDate" disabled style="width: 100%;" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="法定代表">
            <el-input v-model="form.legalRepresentative" disabled style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="租户电话">
            <el-input v-model="form.tenantPhone" disabled style="width: 100%;" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="租期(月)">
            <el-input v-model.number="form.leaseTerm" disabled style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="停租日期">
            <el-input v-model="formattedStopDate" disabled style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="起租日期">
            <el-input v-model="formattedStartDate" disabled style="width: 100%;" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="收费面积">
            <el-input v-model="form.collectionArea" disabled style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="押金">
            <el-input v-model="form.deposit" disabled style="width: 100%;" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="租金方式">
            <el-input v-model="depositMethod" disabled style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同总额">
            <el-input v-model="TotalAmount" disabled style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="押金说明">
            <el-input v-model="form.depositDescription" disabled style="width: 100%;" />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="备注">
            <el-input v-model="form.remarks" disabled style="width: 100%;" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- 操作按钮 -->
    <div class="button-group" style="text-align: right;margin-right: 30px;">
      <el-button @click="goBack">返回</el-button>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request';

export default {
  name: 'ParkingLeaseDetail',
  data() {
    return {
      feeAmount: 0,
      brokerage: 0,
      TotalAmount: 0,
      form: {
        communityName: "",
        parkingSpaceCode: "",
        leaseCompany: "",
        leaseName: "",
        leasePhone: "",
        tenantName: "",
        tenantPhone: "",
        legalRepresentative: "",
        collectionArea: "",
        signingDate: "",
        leaseTerm: 1,
        startDate: "",
        stopDate: "",
        depositDescription: "",
        remarks: "",
        contractNumber: "",
        vehicleLicense: "",
        vehicleDisplacement: ""
      },
      depositMethod: ""
    }
  },
  computed: {
    formattedSigningDate() {
      return this.formatDate(this.form.signingDate);
    },
    formattedStartDate() {
      return this.formatDate(this.form.startDate);
    },
    formattedStopDate() {
      return this.formatDate(this.form.stopDate);
    }
  },
  created() {
    const id = this.$route.query.parkingLeaseId;
    console.log(id);

    if (id) {
      this.fetchData(id);
    }
  },
  methods: {
    fetchData(id) {
      request.get(`/parkingLease/${id}`)
        .then(res => {
          this.form = res.data;
          this.feeAmount = res.data.contractRent;
          this.brokerage = res.data.deposit;
          this.TotalAmount = res.data.contractRent * res.data.leaseTerm;
          this.depositMethod = res.data.depositMethod; // 确保这里与后端返回字段匹配
        })
        .catch(err => {
          console.error('获取详情失败:', err);
          this.$message.error(err.message || '获取详情失败');
        });
    },

    // 格式化日期
    formatDate(date) {
      if (!date) return '';
      const d = new Date(date);
      return `${d.getFullYear()}-${(d.getMonth() + 1).toString().padStart(2, '0')}-${d.getDate().toString().padStart(2, '0')}`;
    },

    // 返回上一页
    goBack() {
      this.$router.go(-1);
    }
  }
}
</script>

<style scoped>
.contract-form {
  padding: 20px;
}

h3 {
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: bold;
}

.basic-info,
.contract-info {
  margin-bottom: 20px;
}

.el-form-item {
  margin-bottom: 15px;
}

.button-group {
  margin-top: 20px;
}
</style>
